/**
 * Created by GYL on 2018/8/24
 */
import React, { Component } from 'react';
import Container from "../../../components/common/Container";
import { Tabs } from 'antd';
const TabPane = Tabs.TabPane;
import styles from '../Entry_Pro.less';
import cile from '../../../assets/cile.png';
import request from '../../../utils/request';
import MyModal from '../../../components/common/MyModal';
import Echarts_tu from '../echarts2/Echarts_tu';
import moment from 'moment';
import fengshan from '../../../assets/fengshan.png';
import fengshan2 from '../../../assets/fengshan2.gif';

import cileRED from '../../../assets/cileRED.png';
var timeval3
class Entry3 extends Component {
    state = {
        jinshuill: true,
        MyModal1Visible: false,
        echartsData: {},
        unit: ""
    }

    componentDidMount() {
        request({
            url: '/web/redstar/drawing/drawing103',
            method: 'POST',
            data: {}
        }).then(data => {
            console.log(data)
            if (data.rc === 0) {
                this.setState({
                    time:data.ret.time,
                    jinshuill: data.ret.HXPLC_3_90,
                    tiaojiechi: data.ret.HXPLC_3_87,
                    huanyuanchi: data.ret.HXPLC_3_88,
                    zhonghechi1: data.ret.HXPLC_3_89,
                    zhonghechi2: data.ret.HXPLC_3_85,
                    chushuiliuliang: data.ret.HXPLC_3_86,

                    suan1: data.ret.HXPLC_3_71 == 'False' ? false : true,
                    suan2: data.ret.HXPLC_3_73 == 'False' ? false : true,
                    tiaojiechikg: data.ret.HXPLC_3_26 == 'False' ? false : true,
                    huanyuanchikg: data.ret.HXPLC_3_29 == 'False' ? false : true,
                    zhonghechi1kg: data.ret.HXPLC_3_32 == 'False' ? false : true,
                    zhonghechi2kg: data.ret.HXPLC_3_5 == 'False' ? false : true,
                    chongbuchikg: data.ret.HXPLC_3_35 == 'False' ? false : true,
                    xuningchikg: data.ret.HXPLC_3_38 == 'False' ? false : true,

                    PACkgcile: data.ret.HXPLC_3_56 == 'False' ? false : true,
                    PACkgbox: data.ret.HXPLC_3_53 == 'False' ? false : true,

                    PAMkgcile: data.ret.HXPLC_3_62 == 'False' ? false : true,
                    PAMkgbox: data.ret.HXPLC_3_59 == 'False' ? false : true,

                    chongbujikgcile: data.ret.HXPLC_3_83 == 'False' ? false : true,
                    chongbujikgbox: data.ret.HXPLC_3_80 == 'False' ? false : true,

                    jiankgcile: data.ret.HXPLC_3_50 == 'False' ? false : true,
                    jiankgbox: data.ret.HXPLC_3_47 == 'False' ? false : true,

                    huanyuanjikgcile: data.ret.HXPLC_3_44 == 'False' ? false : true,
                    huanyuanjikgbox: data.ret.HXPLC_3_41 == 'False' ? false : true,

                    PAMkgcile2: data.ret.HXPLC_3_68 == 'False' ? false : true,
                    PAMkgbox2: data.ret.HXPLC_3_65 == 'False' ? false : true,

                    shalvtishenbeng1: data.ret.HXPLC_3_14 == 'False' ? false : true,
                    shalvtishenbeng2: data.ret.HXPLC_3_17 == 'False' ? false : true,

                    fanxibeng: data.ret.HXPLC_3_20 == 'False' ? false : true,

                    waipaibeng1: data.ret.HXPLC_3_8 == 'False' ? false : true,
                    waipaibeng2: data.ret.HXPLC_3_11 == 'False' ? false : true,

                    painibeng:data.ret.HXPLC_3_2 == 'False' ? false : true,
                })
            }
        })
        timeval3 = setInterval(() => {
        request({
            url: '/web/redstar/drawing/drawing103',
            method: 'POST',
            data: {}
        }).then(data => {
            console.log(data)
            if (data.rc === 0) {
                this.setState({
                    time:data.ret.time,
                    jinshuill: data.ret.HXPLC_3_90,
                    tiaojiechi: data.ret.HXPLC_3_87,
                    huanyuanchi: data.ret.HXPLC_3_88,
                    zhonghechi1: data.ret.HXPLC_3_89,
                    zhonghechi2: data.ret.HXPLC_3_85,
                    chushuiliuliang: data.ret.HXPLC_3_86,

                    suan1: data.ret.HXPLC_3_71 == 'False' ? false : true,
                    suan2: data.ret.HXPLC_3_73 == 'False' ? false : true,
                    tiaojiechikg: data.ret.HXPLC_3_26 == 'False' ? false : true,
                    huanyuanchikg: data.ret.HXPLC_3_29 == 'False' ? false : true,
                    zhonghechi1kg: data.ret.HXPLC_3_32 == 'False' ? false : true,
                    zhonghechi2kg: data.ret.HXPLC_3_5 == 'False' ? false : true,
                    chongbuchikg: data.ret.HXPLC_3_35 == 'False' ? false : true,
                    xuningchikg: data.ret.HXPLC_3_38 == 'False' ? false : true,

                    PACkgcile: data.ret.HXPLC_3_56 == 'False' ? false : true,
                    PACkgbox: data.ret.HXPLC_3_53 == 'False' ? false : true,

                    PAMkgcile: data.ret.HXPLC_3_62 == 'False' ? false : true,
                    PAMkgbox: data.ret.HXPLC_3_59 == 'False' ? false : true,

                    chongbujikgcile: data.ret.HXPLC_3_83 == 'False' ? false : true,
                    chongbujikgbox: data.ret.HXPLC_3_80 == 'False' ? false : true,

                    jiankgcile: data.ret.HXPLC_3_50 == 'False' ? false : true,
                    jiankgbox: data.ret.HXPLC_3_47 == 'False' ? false : true,

                    huanyuanjikgcile: data.ret.HXPLC_3_44 == 'False' ? false : true,
                    huanyuanjikgbox: data.ret.HXPLC_3_41 == 'False' ? false : true,

                    PAMkgcile2: data.ret.HXPLC_3_68 == 'False' ? false : true,
                    PAMkgbox2: data.ret.HXPLC_3_65 == 'False' ? false : true,

                    shalvtishenbeng1: data.ret.HXPLC_3_14 == 'False' ? false : true,
                    shalvtishenbeng2: data.ret.HXPLC_3_17 == 'False' ? false : true,

                    fanxibeng: data.ret.HXPLC_3_20 == 'False' ? false : true,

                    waipaibeng1: data.ret.HXPLC_3_8 == 'False' ? false : true,
                    waipaibeng2: data.ret.HXPLC_3_11 == 'False' ? false : true,

                    painibeng:data.ret.HXPLC_3_2 == 'False' ? false : true,
                })
            }
        })
    },10000)
    }
    componentWillUnmount(){
        clearInterval(timeval3)
    }

    // 取消保存
    ModalCancel = (type) => {
        let t = this;
        t.setState({
            [type]: false,
            modalBtnLoading: false
        })
    };
    onEcharts = (code, unit) => {
        request({
            url: '/web/redstar/plchistory/getPlcHistoryData',
            method: 'POST',
            data: {
                deviceId: 'PLCGK216',
                endDatetimeStr: moment().format("YYYY-MM-DD HH:mm:ss"),
                factorCodes: code,
                pageIndex: 1,
                pageSize: 9999999,
                startDatetimeStr: moment().subtract(3, "hour").format("YYYY-MM-DD HH:mm:ss")

            }
        }).then(data => {
            if (data.rc === 0) {
                this.setState({
                    MyModal1Visible: true,
                    echartsData: data.ret,
                    unit: unit,
                    title:data.ret.useName
                })
            }
            console.log(data)

        })
    }

    render() {



        let width = document.body.clientWidth;
        const height = document.body.clientHeight;
        let containerHeight = '92vh';
        let tableHeight = 170;
        if (width > 1367) {
            tableHeight = 220;
            containerHeight = '92vh';
        }

        console.log(this.state.tiaojiechikg)



        return (
            <div>
                {
                    this.state.MyModal1Visible &&
                    <MyModal
                        width={1200}
                        visible={this.state.MyModal1Visible}
                        title={this.state.title}
                        footerShow={false}
                        destroyOnClose={true}
                        onCancel={this.ModalCancel.bind(this, 'MyModal1Visible')}

                    >
                        <Echarts_tu
                            data={this.state.echartsData}
                            unit={this.state.unit}
                        />
                    </MyModal>

                }
                <Container
                    header={true}
                    style={{ height: containerHeight }}
                >
                    <div className={styles.tu} style={{ width: "100%", height: "92vh", position: 'relative' }}>
                    <div style={{ height:20,position: 'absolute', top: "1%", right: "11%", textAlign: 'center', lineHeight: '20px', color: '#fff', fontSize: 12,color:'#000' }}>数据节点时间 : </div>
                    <div style={{ height:20,position: 'absolute', top: "1%", right: "2%", textAlign: 'center', lineHeight: '20px', color: '#fff', fontSize: 12,color:'#000' }}>{moment(Number(this.state.time)).format("YYYY-MM-DD HH:mm:ss")}</div>
                    <div style={{ width: 20, height:20, backgroundColor:'red', position: 'absolute', top: "6%", left: "1%", textAlign: 'center', lineHeight: '20px', color: '#fff', fontSize: 12 }}></div>
                    <div style={{ width: 20, height:20, backgroundColor:'green', position: 'absolute', top: "1%", left: "1%", textAlign: 'center', lineHeight: '20px', color: '#fff', fontSize: 12 }}></div>
                    <div style={{ height:20,position: 'absolute', top: "6%", left: "3%", textAlign: 'center', lineHeight: '20px', color: '#fff', fontSize: 12,color:'#000' }}>关闭</div>
                    <div style={{ height:20, position: 'absolute', top: "1%", left: "3%", textAlign: 'center', lineHeight: '20px', color: '#fff', fontSize: 12,color:'#000' }}>运行</div>
                        {/* #1酸 */}
                        <img src={this.state.suan1 ? cile : cileRED} style={{ width: '2%', position: 'absolute', top: '21%', left: '5.3%' }} />

                        {/* #2酸 */}
                        <img src={this.state.suan2 ? cile : cileRED} style={{ width: '2%', position: 'absolute', top: '21%', left: '9.3%' }} />

                        {/* 流量 */}
                        <div style={{ width: 60, height: 25, backgroundColor: 'blue', position: 'absolute', top: "60%", left: "2%", textAlign: 'center', lineHeight: '25px', color: '#fff', fontSize: 12, cursor: 'pointer' }} onClick={this.onEcharts.bind(this, 'HXPLC_1_86', 'm³/h')}>{this.state.jinshuill}m³/h</div>

                        {/* 调节池 */}
                        <div style={{ width: 50, height: 25, backgroundColor: 'blue', position: 'absolute', top: "80%", left: "11%", textAlign: 'center', lineHeight: '25px', color: '#fff', fontSize: 12, cursor: 'pointer' }} onClick={this.onEcharts.bind(this, 'HXPLC_1_87', 'PH')}>{this.state.tiaojiechi}</div>
                        <div style={{ width: 50, height: 20, backgroundColor: '#68688d', position: 'absolute', top: "85%", left: "11%", textAlign: 'center', lineHeight: '20px', color: '#fff', fontSize: 12 }}>PH</div>
                        <div style={{ width: "1.2%", height: "2.2%", backgroundColor: this.state.tiaojiechikg ? 'green' : 'red', position: 'absolute', top: "48.6%", left: "12.8%", textAlign: 'center', lineHeight: '20px', color: '#fff', fontSize: 12 }}></div>
                        <img src={this.state.tiaojiechikg ? fengshan2 : fengshan} style={{ position: 'absolute', top: "60%", left: "11.7%", width: '3%' }} />

                        {/* 还原池 */}
                        <div style={{ width: 50, height: 25, backgroundColor: 'blue', position: 'absolute', top: "80%", left: "15%", textAlign: 'center', lineHeight: '25px', color: '#fff', fontSize: 12, cursor: 'pointer' }} onClick={this.onEcharts.bind(this, 'HXPLC_1_88', 'ORP')}>{this.state.huanyuanchi}</div>
                        <div style={{ width: 50, height: 20, backgroundColor: '#68688d', position: 'absolute', top: "85%", left: "15%", textAlign: 'center', lineHeight: '20px', color: '#fff', fontSize: 12 }}>ORP</div>
                        <div style={{ width: "1.2%", height: "2.2%", backgroundColor: this.state.huanyuanchikg ? 'green' : 'red', position: 'absolute', top: "48.6%", left: "16.6%", textAlign: 'center', lineHeight: '20px', color: '#fff', fontSize: 12 }}></div>
                        <img src={this.state.huanyuanchikg ? fengshan2 : fengshan} style={{ position: 'absolute', top: "60%", left: "15.7%", width: '3%' }} />
                        {/* 中和池1 */}
                        <div style={{ width: 50, height: 25, backgroundColor: 'blue', position: 'absolute', top: "80%", left: "19%", textAlign: 'center', lineHeight: '25px', color: '#fff', fontSize: 12, cursor: 'pointer' }} onClick={this.onEcharts.bind(this, 'HXPLC_1_105', 'PH')}>{this.state.zhonghechi1}</div>
                        <div style={{ width: 50, height: 20, backgroundColor: '#68688d', position: 'absolute', top: "85%", left: "19%", textAlign: 'center', lineHeight: '20px', color: '#fff', fontSize: 12 }}>PH</div>
                        <div style={{ width: "1.2%", height: "2.2%", backgroundColor: this.state.zhonghechi1kg ? 'green' : 'red', position: 'absolute', top: "48.6%", left: "20.2%", textAlign: 'center', lineHeight: '20px', color: '#fff', fontSize: 12 }}></div>
                        <img src={this.state.zhonghechi1kg ? fengshan2 : fengshan} style={{ position: 'absolute', top: "60%", left: "19%", width: '3%' }} />
                        {/* 重捕池 */}
                        {/* <div style={{ width: 50, height: 25, backgroundColor: 'blue', position: 'absolute', top: "80%", left: "23%", textAlign: 'center', lineHeight: '25px', color: '#fff', fontSize: 12 }}>123m³/h</div> */}
                        <div style={{ width: "1.2%", height: "2.2%", backgroundColor: this.state.chongbuchikg ? 'green' : 'red', position: 'absolute', top: "48.6%", left: "23.8%", textAlign: 'center', lineHeight: '20px', color: '#fff', fontSize: 12 }}></div>
                        <img src={this.state.chongbuchikg ? fengshan2 : fengshan} style={{ position: 'absolute', top: "60%", left: "22.9%", width: '3%' }} />
                        {/* 絮凝池 */}
                        {/* <div style={{ width: 50, height: 25, backgroundColor: 'blue', position: 'absolute', top: "80%", left: "27%", textAlign: 'center', lineHeight: '25px', color: '#fff', fontSize: 12 }}>123m³/h</div> */}
                        <div style={{ width: "1.2%", height: "2.2%", backgroundColor: this.state.xuningchikg ? 'green' : 'red', position: 'absolute', top: "48.6%", left: "27.6%", textAlign: 'center', lineHeight: '20px', color: '#fff', fontSize: 12 }}></div>
                        <img src={this.state.xuningchikg ? fengshan2 : fengshan} style={{ position: 'absolute', top: "60%", left: "26.7%", width: '3%' }} />
                        {/* 沉淀池 */}
                        {/* <div style={{ width: 50, height: 25, backgroundColor: 'blue', position: 'absolute', top: "90%", left: "31%", textAlign: 'center', lineHeight: '25px', color: '#fff', fontSize: 12 }}>123m³/h</div> */}


                        {/* 中和池2 */}
                        <div style={{ width: 50, height: 25, backgroundColor: 'blue', position: 'absolute', top: "75%", left: "35%", textAlign: 'center', lineHeight: '25px', color: '#fff', fontSize: 12, cursor: 'pointer' }} onClick={this.onEcharts.bind(this, 'HXPLC_1_85', 'PH')}>{this.state.zhonghechi2}</div>
                        <div style={{ width: 50, height: 20, backgroundColor: '#68688d', position: 'absolute', top: "80%", left: "35%", textAlign: 'center', lineHeight: '20px', color: '#fff', fontSize: 12 }}>PH</div>
                        <div style={{ width: "1.2%", height: "2.2%", backgroundColor: this.state.zhonghechi2kg ? 'green' : 'red', position: 'absolute', top: "49.5%", left: "37.6%", textAlign: 'center', lineHeight: '20px', color: '#fff', fontSize: 12 }}></div>
                        <img src={this.state.xuningchikg ? fengshan2 : fengshan} style={{ position: 'absolute', top: "60%", left: "37.3%", width: '2%' }} />

                        {/* 出水流量 */}
                        <div style={{ width: 50, height: 25, backgroundColor: 'blue', position: 'absolute', top: "50%", left: "95%", textAlign: 'center', lineHeight: '25px', color: '#fff', fontSize: 12, cursor: 'pointer' }} onClick={this.onEcharts.bind(this, 'HXPLC_1_106', 'm³/h')}>{this.state.chushuiliuliang}m³/h</div>
                        <div style={{ width: 50, height: 20, backgroundColor: '#68688d', position: 'absolute', top: "55%", left: "95%", textAlign: 'center', lineHeight: '20px', color: '#fff', fontSize: 12 }}>出水流量</div>

                        {/* PAC */}
                        <img src={this.state.PACkgcile ? cile : cileRED} style={{ width: '2%', position: 'absolute', top: '26%', left: '42.8%' }} />
                        <div style={{ width: "1.4%", height: "2.6%", backgroundColor: this.state.PACkgbox ? 'green' : 'red', position: 'absolute', top: "28%", left: "46%", textAlign: 'center', lineHeight: '20px', color: '#fff', fontSize: 12 }}></div>
                        <img src={this.state.PACkgbox ? fengshan2 : fengshan} style={{ position: 'absolute', top: "37%", left: "45.9%", width: '2%' }} />

                        {/* PAM */}
                        <img src={this.state.PAMkgcile ? cile : cileRED} style={{ width: '2%', position: 'absolute', top: '26%', left: '50.8%' }} />
                        <div style={{ width: "1.4%", height: "2.6%", backgroundColor: this.state.PAMkgbox ? 'green' : 'red', position: 'absolute', top: "28%", left: "54%", textAlign: 'center', lineHeight: '20px', color: '#fff', fontSize: 12 }}></div>
                        <img src={this.state.PAMkgbox ? fengshan2 : fengshan} style={{ position: 'absolute', top: "37%", left: "53.9%", width: '2%' }} />

                        {/* 重补剂 */}
                        <img src={this.state.chongbujikgcile ? cile : cileRED} style={{ width: '2%', position: 'absolute', top: '23%', left: '60.3%' }} />
                        <div style={{ width: "1.4%", height: "2.6%", backgroundColor: this.state.chongbujikgbox ? 'green' : 'red', position: 'absolute', top: "25%", left: "63.5%", textAlign: 'center', lineHeight: '20px', color: '#fff', fontSize: 12 }}></div>
                        <img src={this.state.chongbujikgbox ? fengshan2 : fengshan} style={{ position: 'absolute', top: "35%", left: "63.5%", width: '2%' }} />

                        {/* 碱 */}
                        <img src={this.state.jiankgcile ? cile : cileRED} style={{ width: '2%', position: 'absolute', top: '23%', left: '67.8%' }} />
                        <div style={{ width: "1.4%", height: "2.6%", backgroundColor: this.state.jiankgbox ? 'green' : 'red', position: 'absolute', top: "25%", left: "71%", textAlign: 'center', lineHeight: '20px', color: '#fff', fontSize: 12 }}></div>
                        <img src={this.state.jiankgbox ? fengshan2 : fengshan} style={{ position: 'absolute', top: "35%", left: "71%", width: '2%' }} />

                        {/* 还原剂1 */}
                        <img src={this.state.huanyuanjikgcile ? cile : cileRED} style={{ width: '2%', position: 'absolute', top: '23%', left: '75.2%' }} />
                        <div style={{ width: "1.4%", height: "2.6%", backgroundColor: this.state.huanyuanjikgbox ? 'green' : 'red', position: 'absolute', top: "25%", left: "78.5%", textAlign: 'center', lineHeight: '20px', color: '#fff', fontSize: 12 }}></div>
                        <img src={this.state.huanyuanjikgbox ? fengshan2 : fengshan} style={{ position: 'absolute', top: "35%", left: "78.3%", width: '2%' }} />

                        {/* PAM+阳离子 */}
                        <img src={this.state.PAMkgcile2 ? cile : cileRED} style={{ width: '2%', position: 'absolute', top: '23%', left: '82.8%' }} />
                        <div style={{ width: "1.4%", height: "2.6%", backgroundColor: this.state.PAMkgbox2 ? 'green' : 'red', position: 'absolute', top: "25%", left: "86.1%", textAlign: 'center', lineHeight: '20px', color: '#fff', fontSize: 12 }}></div>
                        <img src={this.state.PAMkgbox2 ? fengshan2 : fengshan} style={{ position: 'absolute', top: "35%", left: "86%", width: '2%' }} />

                        {/* 砂滤提升泵 */}
                        <img src={this.state.shalvtishenbeng1 ? cile : cileRED} style={{ width: '2%', position: 'absolute', top: '59.1%', left: '47.9%' }} />
                        <img src={this.state.shalvtishenbeng2 ? cile : cileRED} style={{ width: '2%', position: 'absolute', top: '69.2%', left: '47.9%' }} />


                        {/* 反洗泵 */}
                        <img src={this.state.fanxibeng ? cile : cileRED} style={{ width: '2%', position: 'absolute', top: '76.5%', left: '65.8%' }} />

                        {/* 排泥泵 */}
                        <img src={this.state.painibeng ? cile : cileRED} style={{ width: '2%', position: 'absolute', top: '83.8%', left: '37.5%' }} />

                        {/* 外排泵 */}
                        <img src={this.state.waipaibeng1 ? cile : cileRED} style={{ width: '2%', position: 'absolute', top: '60.7%', left: '89.8%' }} />
                        <img src={this.state.waipaibeng2 ? cile : cileRED} style={{ width: '2%', position: 'absolute', top: '68.7%', left: '89.8%' }} />

                    </div>


                </Container>
            </div>
        )


    }
}
export default Entry3;

